<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Button</title>
  <script type="text/javascript" src="../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../highlightCode.js"></script>
  <link href='../../highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <style type="text/css">
    rect[role="button"] { fill: red; }
    rect[aria-pressed="true"] { fill: green; }
    /* rect:hover { fill: blue; } */
  .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
       unselectable="on"
 onselectstart="return false;"
 onmousedown="return false;"
}

  </style>

</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Button</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Create an SVG image of an interactive SVG button, from a rectangle  that includes <b>linearGradient &amp; radialGradient</b> and drop shadow.
</div>
<table><tr>
<td>
<div id=objSVGDiv style=width:400px;height:60px>
<svg id=mySVGObj width=400 height=60>
<defs id="onOffButtonDefs"><filter id="onOffButtonDropShadow" height="40">
  <feGaussianBlur in="SourceAlpha" stdDeviation="10"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="6" dy="10" result="offsetblur"/> <!-- how much to offset -->
  <feMerge>
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter><linearGradient
       id="linearGradientOnOffButton">
      <stop
         style="stop-color:#000000;stop-opacity:0"
         offset="0" />
      <stop
         style="stop-color:#000000;stop-opacity:0.5"
         offset="1" />
    </linearGradient><linearGradient
       id="linearGradientOnOffButton2">
      <stop
         style="stop-color:#ffffff;stop-opacity:1"
         offset="0" />
      <stop
         style="stop-color:#ffffff;stop-opacity:0"
         offset="1" />
    </linearGradient><linearGradient
       x1="120"
       y1="10"
       x2="120"
       y2="50"
       id="linearGradientOnOffButtonHighlight"
       xlink:href="#linearGradientOnOffButton2"
       gradientUnits="userSpaceOnUse" /><radialGradient
       cx="120"
       cy="170"
       r="100"
       fx="120"
       fy="170"
       id="radialGradientOnOffButton"
       xlink:href="#linearGradientOnOffButton"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,-0.72727275,2,0,-220,170)" />
  </defs>
<symbol id="disabledButtonSymbol" viewBox="0 0 260 120" >
<g cursor="none" >
  <rect  fill="grey" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none" filter="url(#onOffButtonDropShadow)" />
    <rect width="220" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradientOnOffButton);stroke:none" />
    <text x="120" y="66" id="textDisable" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#000000;stroke:none;font-family:Sans">DISABLED</text>
    <text x="120" y="64.5" id="textDisable" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">DISABLED</text>
    <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradientOnOffButtonHighlight)" />
  </g>
</symbol>
<symbol id="offButtonSymbol" viewBox="0 0 260 120" >
<g cursor="pointer" >
  <rect  fill="red" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none" filter="url(#onOffButtonDropShadow)" />
    <rect width="220" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradientOnOffButton);stroke:none" />
    <text x="120" y="66" id="text3194" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#000000;stroke:none;font-family:Sans">OFF</text>
    <text x="120" y="64.5" id="text3198" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">OFF</text>
    <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradientOnOffButtonHighlight)" />
  </g>
</symbol>
<symbol id="onButtonSymbol" viewBox="0 0 260 120" >
<g cursor="pointer" >
  <rect fill="green" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none" filter="url(#onOffButtonDropShadow)" />
    <rect width="220" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradientOnOffButton);stroke:none" />
    <text x="120" y="66" id="text3194" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#000000;stroke:none;font-family:Sans">ON</text>
    <text x="120" y="64.5" id="text3198" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">ON</text>
    <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradientOnOffButtonHighlight)" />
  </g>
</symbol>

<use href="#disabledButtonSymbol" x=0 y=10 width="120" height="50" />
<use href="#offButtonSymbol" x=150 y=10 width="120" height="50" />
<use href="#onButtonSymbol" x=280 y=10 width="120" height="50" />
</svg>
</div>

<div class="noselect"  style="padding:10px;width:400px;text-align:justify">

<b>Scenerio:</b><br />
If the motor's starter is in its manual OFF or ON selection, the SCADA ON/OFF button is shown as "DISABLED". It cannot
be selected by the SCADA operator.
<p></p>

The user places cursor over the button, then toggels the button to ON(green) or OFF(red).
The button displays "ON" or "OFF" text. Note: Added button click sound.
<p></p>

A 'feed' line leaving the bottom of button displays as dashed/red for OFF  and solid/green for ON. (It is
intended to connect to an image representing where the feed connects.)

</div>
</td>
<td>
<div id="svgDiv" style='width:400px;height:400px;'>
<svg id=mySVG width=400 height=400>
<defs>
<filter id="dropShadow" height="40">
  <feGaussianBlur in="SourceAlpha" stdDeviation="10"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="6" dy="10" result="offsetblur"/> <!-- how much to offset -->
  <feMerge>
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
</defs>
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient3159">
      <stop
         id="stop3163"
         style="stop-color:#000000;stop-opacity:0"
         offset="0" />
      <stop
         id="stop3161"
         style="stop-color:#000000;stop-opacity:0.5"
         offset="1" />
    </linearGradient>
    <linearGradient
       id="linearGradient3030">
      <stop
         id="stop3032"
         style="stop-color:#ffffff;stop-opacity:1"
         offset="0" />
      <stop
         id="stop3034"
         style="stop-color:#ffffff;stop-opacity:0"
         offset="1" />
    </linearGradient>
    <linearGradient
       x1="120"
       y1="10"
       x2="120"
       y2="50"
       id="linearGradient3113"
       xlink:href="#linearGradient3030"
       gradientUnits="userSpaceOnUse" />
    <radialGradient
       cx="120"
       cy="170"
       r="100"
       fx="120"
       fy="170"
       id="radialGradient3165"
       xlink:href="#linearGradient3159"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,-0.72727275,2,0,-220,170)" />
  </defs>
  <line x1="0" y1="20" x2=400 y2=20 stroke='green' stroke-width="6" />
<line x1="200" y1="20" x2=200 y2=150 stroke='green' stroke-width="6" />
<line id=feedLine x1="200" y1="160" x2=200 y2=380 stroke='red' stroke-dasharray="20 20" stroke-width="6" />
  <g id="layer1" transform="translate(80,100)"
     cursor="pointer"
     onkeydown="return buttonEvent(evt);"
     onclick="return buttonEvent(evt);"

     >
    <rect
       role="button"
       aria-pressed="false"
       width="220"
       height="80"
       ry="40"
       x="10"
       y="10"
       id="ButtonBase"
       style="stroke:none"
          filter="url(#dropShadow)"
        />
    <rect
       width="220"
       height="80"
       ry="40"
       x="10"
       y="10"
       id="ButtonGlow"
       pointer-events="none"
       style="fill:url(#radialGradient3165);stroke:none"


       />
    <text class="noselect"
       x="120"
       y="66"
       id="text3194"
       pointer-events="none"
       xml:space="preserve"
       style="font-size:40px;text-align:center;text-anchor:middle;fill:#000000;stroke:none;font-family:Sans">OFF</text>
    <text  class="noselect"
       x="120"
       y="64.5"
       id="text3198"
       pointer-events="none"
       xml:space="preserve"
       style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">OFF</text>
    <path
       d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z"
       id="ButtonHighlight"
       pointer-events="none"
       style="fill:url(#linearGradient3113)" />
  </g>


</svg>
</div>

</td>
</tr></table>
  <br />SVG Source:
  <div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
  Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:100%;height:300px;text-align:left; /></div><p></p>
</center>
<script id=myScript>
var audio = new Audio('buttonClick.mp3');

var SetText="OFF"
function buttonEvent(event)
{
    if ((event.type == "click" && event.button == 0) ||
    (event.type == "keydown" && (event.keyCode == 32 || event.keyCode ==13)))
    {
        var target = event.target; /* Should be rectangle ButtonBase */
         audio.play();  //---added button click sound---
        if(SetText=="ON") //---prevent selection 'bounce'---
        {
            var setPressed = false;
            SetText = "OFF";
            feedLine.setAttribute("stroke","red")
            feedLine.setAttribute("stroke-dasharray", "20 20")
            console.log("OFF")
        }
        else if ( target.getAttribute("aria-pressed") == "false" )
        {
            setPressed = true;
            SetText = "ON";
            console.log("ON")
            feedLine.setAttribute("stroke","green")
            feedLine.removeAttribute("stroke-dasharray")
        }

        target.setAttribute("aria-pressed", setPressed );

        var parent = target.parentNode;
        var child = parent.firstChild;
        while (child != null)
        {
            if (child.nodeName == "text" && child.hasChildNodes() )
            {
                child.firstChild.nodeValue = SetText;
            }
            child = child.nextSibling;
        }
    }
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
   	showSourceSVG()
	showSourceJS()

}


</script>
 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-88028738-1', 'auto');
  ga('send', 'pageview');
</script>

</body>

</html>